<template>
	<view>
		<!-- #ifdef APP-PLUS||H5 -->
		<titlebara mode="发活动" :backToIndex="false" :back="true" text="发活动" backgroundColor='#f5f5f5'>
			<view slot="title">
				<image class="showMore" mode='aspectFit' src="https://dnsverify.pfmoto.com/appstatic/community/more.png"
					@click="showMore">

				<!-- <view 
					v-if="content.length <= 0 && imgList.length <= 0 || cover =='' || titleActivity =='' || signupStartTime =='' || signupEndTime =='' || activityStartTime =='' || activityEndTime =='' || peopleNum==0 || activityStartAddress=='' || activityEndAddress=='' || activitySpotAddress==''"
					class="showMore titleCommentTouched_" 
					@click="commentTouched"
				>
					+发布
				</view>
				<view v-else class="showMore titleCommentTouched" @click="commentTouched">+发布</view> -->
				<view class="showMore titleCommentTouched" @click="commentTouched">+发布</view>
				<view class="titleText">发活动</view>
			</view>
		</titlebara>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<titlebara mode="发活动" :backToIndex="false" :back="true" :text="text" backgroundColor='#f5f5f5'>
			<view slot="title">
				<view class="titleText">发活动</view>
			</view>
		</titlebara>
		<!-- #endif -->

		<view class="releaseState" :style="{'top':top+'px','height':'calc(100% - '+top+'px)'}">
			<!-- <scroll-view scroll-y="true" :style="{'top':top+'px','height':'calc(100%  - '+top+'px)'}"> -->
				<view>

					<view style="margin-bottom: 120rpx;">
						<view class="uploadImg" :style="'display:block'">

							<view class="inputGreybg">

								<image class="uploadImg"
									:src="cover || 'https://dnsverify.pfmoto.com/appstatic/community/activity_img.png'"
									mode='aspectFill' @click="selectMedia" />
							</view>
						</view>

						<view class="info-transverse-input">
							<textarea class="titleInput" type="text" v-model="titleActivity" maxlength="60"
								placeholder="输入活动标题" @input="myCommentInput" ref="textarea" auto-height
								placeholder-style="color:#ADB0AE" />
							<view class="inputNum">{{remnant}}/60</view>
						</view>

						<view class="line"></view>
						<view class="info-transverse">
							<view class="text1">活动类型</view>
							<radio-group name="" @change="activityChange">
								<label v-for="item in activities" :key="item.value">
									<radio :value="item.value" color="#EA5404" style="transform:scale(0.7)" :checked="item.value === activityType" />
									{{item.text}}
								</label>
							</radio-group>
						</view>
						
						<view class="line"></view>
						<view class="info-transverse" @click.stop="chooseSignupStartTime">
							<text class="text1">报名开始时间</text>
							<view class="right">
								<view class="text2" style="margin-right: 5px;"
									v-if="signupStartTime==''||signupStartTime==null">请选择报名开始时间</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{signupStartTime}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						<u-datetime-picker :show="signupStartTimeShow" mode="datetime" @confirm="confirmTime"
							@cancel="cancelPicker" confirmColor="#EA5404" :minDate="nowDate">
						</u-datetime-picker>
						
						
						<view class="line"></view>
						<view class="info-transverse" @click.stop="chooseSignupEndTime">
							<text class="text1">报名结束时间</text>
							<view class="right">
								<view class="text2" style="margin-right: 5px;"
									v-if="signupEndTime==''||signupEndTime==null">请选择报名结束时间</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{signupEndTime}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						<u-datetime-picker :show="signupEndTimeShow" mode="datetime" type='left' @confirm="confirmTime" 
							@cancel="cancelPicker" confirmColor="#EA5404" :minDate="signupStartTimeMin">
						</u-datetime-picker>
						
						<view class="line"></view>
						<view class="info-transverse" @click.stop="chooseActivityStartTime">
							<text class="text1">活动开始时间</text>
							<view class="right">
								<view class="text2" style="margin-right: 5px;"
									v-if="activityStartTime==''||activityStartTime==null">请选择活动开始时间</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{activityStartTime}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						<u-datetime-picker :show="activityStartTimeShow" mode="datetime" @confirm="confirmTime"
							@cancel="cancelPicker" confirmColor="#EA5404" :minDate="signupEndTimeMin">
						</u-datetime-picker>


						<view class="line"></view>
						<view class="info-transverse" @click.stop="chooseActivityEndTime">
							<text class="text1">活动结束时间</text>
							<view class="right">
								<view class="text2" style="margin-right: 5px;"
									v-if="activityEndTime==''||activityEndTime==null">请选择活动结束时间</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{activityEndTime}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						<u-datetime-picker :show="activityEndTimeShow" mode="datetime" type='left' @confirm="confirmTime"
							@cancel="cancelPicker" confirmColor="#EA5404" :minDate="activityStartTimeMin">
						</u-datetime-picker>
						
						<view class="line"></view>
						<view class="info-transverse">
							<text class="text1">参与人数</text>
							<input class="text2" type="number" value='peopleNum' v-model='peopleNum'
								data-type='peopleNum' maxlength="5" @input='inputValueChange' placeholder="请输入参与人数"
								placeholder-style="color:#ADB0AE" />
						</view>
						
						<view class="line"></view>
						<view class="info-transverse">
							<view class="text1">参与范围</view>
							<radio-group name="" @change="peopleRangeChange"> 
								<label v-for="item in  peopleRange" :key="item.value">
									<radio :value="item.value" color="#EA5404" style="transform:scale(0.7)" :checked="item.value === peopleType"/>
									{{item.text}}
								</label>
							</radio-group>
						</view>
						
						<view class="info-transverse" style="margin-top: 0px;" v-show="peopleType===1">
							<view class="text1" style="flex: 1;">车型范围</view>
							<view class="" style="flex: 1;display: flex;flex-direction: column;">
								<checkbox-group style="display: flex;flex-direction: column;padding-right: 10rpx;height: 50rpx;" name="" v-for="item in carModelRange" :key="item.id" @change="carModelRangeChange($event, item)">
									<label style="text-align: right;height: 50rpx;" >
										{{item.modelName}}
										<checkbox :value="item.id" color="#EA5404" style="transform:scale(0.7)" :checked="item.checked" />
									</label>
								</checkbox-group>
								<checkbox-group style="display: flex;flex-direction: column;padding-right: 10rpx;height: 50rpx;" name="" @change="carModelAllChange">
									<label style="color: #EA5404;width: 100%;text-align: right;height: 50rpx;">
										全选
										<checkbox value="all" color="#EA5404" style="transform:scale(0.7)" :checked="allChecked" />
									</label>
								</checkbox-group>
							</view>
						</view>
						
						<view class="line"></view>
						<view class="info-transverse">
							<view class="text1">报名门槛</view>
							<radio-group name="" @change="thresholdChange">
								<label v-for="item in thresholds" :key="item.value">
									<radio :value="item.value" color="#EA5404" style="transform:scale(0.7)" :checked="item.value === thresholdType"/>
									{{item.text}}
								</label>
							</radio-group>
						</view>
						
						<view class="line" v-if="thresholdType===1"></view>
						<view class="info-transverse" v-if="thresholdType===1">
							<text class="text1">消耗积分</text>
							<input class="text2" type="number" value='peopleNum' v-model='points'
								data-type='peopleNum' maxlength="5" @input='pointsInput' placeholder="请输入消耗积分"
								placeholder-style="color:#ADB0AE" />
						</view>
						
						<view class="line" v-if="activityType===1"></view>
						<view class="info-transverse" @click.stop="chooseAddress('start')" v-if="activityType===1">
							<text class="text1" style="flex: 1;">活动起点</text>
							<view class="right" style="flex: 3;justify-content: flex-end;">
								<view class="text2" style="margin-right: 5px;"
									v-if="activityStartAddress==''||activityStartAddress==null">请选择</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{activityStartAddress}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						
						<view class="line" v-if="activityType===1"></view>
						<view class="info-transverse" @click.stop="chooseAddress('end')" v-if="activityType===1"> 
							<text class="text1" style="flex: 1;">活动终点</text>
							<view class="right" style="flex: 3;justify-content: flex-end;">
								<view class="text2" style="margin-right: 5px;"
									v-if="activityEndAddress==''||activityEndAddress==null">请选择</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{activityEndAddress}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						
						<view class="line" v-if="activityType===2"></view>
						<view class="info-transverse" @click.stop="chooseAddress('position')" v-if="activityType===2">
							<text class="text1" style="flex: 1;">活动地点</text>
							<view class="right" style="flex: 3;justify-content: flex-end;">
								<view class="text2" style="margin-right: 5px;"
									v-if="activitySpotAddress==''||activitySpotAddress==null">请选择</view>
								<view class="text2" style="margin-right: 5px;" v-else>{{activitySpotAddress}}</view>
								<image class="arrow"
									src="https://dnsverify.pfmoto.com/appstatic/community/activity_right_arrow.png">
							</view>
						</view>
						
						<view class="line"></view>
						<view class="info-transverse">
							<text class="text1">活动详情</text>
						</view>
						<editor id="editorDetails" class="ql-container" placeholder="点击输入活动详情" @input="detailChange" @ready="onEditorDetailsReady"></editor>
						
						<view class="line"></view>
						<view class="info-transverse">
							<text class="text1">温馨提示</text>
						</view>
						<editor id="editorTips" class="ql-container" placeholder="点击输入温馨提示" @input="tipChange" @ready="onEditorTipsReady"></editor>
						<!-- <textarea class="ql-container" placeholder-style="" maxlength="10000" placeholder="点击输入温馨提示" @input="inputTipsChange"/> -->
					</view>
				</view>
			<!-- </scroll-view> -->

			<view class="imageList" v-for="(item, index) in fileList" :key="item.uuid">

				<UploadView v-show="false" :ref="'uploadView'+index" :sourceFileList="fileList" :item="item"
					@uploading="uploading" @delete="uploadDelete" @error="uploadError" @success="uploadSuccess"
					:percent="item.percent?item.percent:0" :class="item.mediaType=='video'?'videoView':'uploadBtn'">
				</UploadView>

			</view>
			<view class="footer">

				<view class="upload-img" @click="insertImage">
					<image class="" src="https://dnsverify.pfmoto.com/appstatic/community/upload-img.png" mode="">
					</image>
					<view class="text3">
						添加活动详情图片
					</view>
				</view>

				<!-- #ifdef MP-WEIXIN -->
				<view v-if="content.length <= 0 && imgList.length <= 0" class="commentTouched_" @click="commentTouched">
					+发布
				</view>
				<view v-else class="commentTouched" @click="commentTouched">+发布</view>
				<!-- #endif -->



			</view>

		</view>
	</view>
</template>
<script>
	const app = getApp();
	const util = require('@/utils/util.js');
	const network = require('@/manager/network-manager.js');
	const dialog = require('@/utils/dialog.js');
	import UploadView from '@/components/UploadView/UploadView.vue'
	import wCache from '@/utils/wCache.js'
	import titlebara from '@/components/titlebar/titlebar'
	export default {
		components: {
			UploadView,
			titlebara
		},
		data() {
			return {
				top: app.globalData.statusBarHeight + 44, 
				
				titleActivity: '',//标题
				remnant: '0',//标题字数
				
				activityType: 1,
				activities: [
					{
						value:1,
						text:'骑行活动'
					},{
						value:2,
						text:'普通报名活动'
					}
				],
				
				signupStartTimeShow: false, 
				signupStartTime:'',
				
				signupEndTimeShow: false,
				signupEndTime:'',
				
				activityStartTimeShow: false,
				activityStartTime: '',
				
				activityEndTimeShow: false,
				activityEndTime: '',
				
				//最小时间
				signupStartTimeMin : '',
				signupEndTimeMin : '',
				activityStartTimeMin : '',
				activityEndTimeMin: '',
				
				peopleNum: '', 
				
				peopleType:1,
				peopleRange: [
					{
						value:1,
						text:'仅车主'
					},{
						value:0,
						text:'所有用户'
					}
				],
				
				carModelType:[],//选中的车型
				carModelRange: [],
				allChecked:false,
				itemChecked:false,
				
				thresholdType:0,
				thresholds: [
					{
						value:0,
						text:'无'
					},{
						value:1,
						text:'消耗积分'
					}
				],
				
				points:'',
				
				activityStartAddress:'',
				startingPoint:[],
				activityEndAddress:'',
				endingPoint:[],
				activitySpotAddress:'',
				activityAddress:[],
				
				activityCityName:'',//活动所在城市
				activityCityCode:'',
				
				tips:'',

				show: false,
				selector: ['拍摄', '从手机相册选择'],
				showPicker: false,
				content: '',
				
				fileList: [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}],
				topPagination: {
					loadMore: true,
					page: 1,
					totalPage: 1,
					limit: 10,
					length: 100
				},
				oldSelectTopic: [],
				cover: '',

				imgList: [],

				topic: '',
				topicId: '',
				showUpload: false,
				showTopic: true,
				topicName: '',
				showUploadImg: false,
				disabled: false,
				flag: false,
				urls: [],

				
				nowDate: new Date().getTime(),


			};
		},
		
		onLoad(option) {
			// uni.loadFontFace({
			// 	family: 'Pacifico',
			// 	source: 'url("https://sungd.github.io/Pacifico.ttf")'
			// })
			this.getCarModelList()
		},
		onShow() {
			var that=this
			uni.$once('getAddress',function(data){
				console.log('监听到事件来自返回的信息：' + JSON.stringify(data));
				console.log('监听到事件来自返回的地址信息：' + JSON.stringify(data.positionInformation));//{recommend standard_address latitude longitude}
				console.log('监听到事件来自返回的类型：' + JSON.stringify(data.type));//start/end/position
				if(data.type=='start'){//活动起点
					that.activityStartAddress=data.positionInformation.recommend
					that.startingPoint=[data.positionInformation.longitude,data.positionInformation.latitude]
					that.activityCityName=data.positionInformation.cityName
					that.activityCityCode=data.positionInformation.cityCode
				}else if(data.type=='end'){//活动终点
					that.activityEndAddress=data.positionInformation.recommend
					that.endingPoint=[data.positionInformation.longitude,data.positionInformation.latitude]
				}else{//活动地点
					that.activitySpotAddress=data.positionInformation.recommend
					that.activityAddress=[data.positionInformation.longitude,data.positionInformation.latitude]
					that.activityCityName=data.positionInformation.cityName
					that.activityCityCode=data.positionInformation.cityCode
				}
			})
			
			if (uni.getStorageSync('topicName')) {
				this.topicName = uni.getStorageSync('topicName')
			}
			if (uni.getStorageSync('topicId')) {
				this.topicId = uni.getStorageSync('topicId')
			}
			// this.$refs.uploadView.upload()
			app.trackPage(util.getNavigationBarTitle());
			
			

		},
		created() {},
		methods: {
			getCarModelList(){
				var uri = app.globalData.config.interfaces.URL_CAR_MODEL_LIST_FORAPP;
				var params = {
					statusFlag: 0
				};
				network.get(uri, params, 'form').then(res => {
					if (res.code == 200) {
						var list=[]
						for(var i=0;i<res.data.length;i++){
							var obj={
								modelId:res.data[i].uuid,
								// modelCode:res.data[i].modelCode,
								modelName:res.data[i].modelName,
								sort:'',
							}
							list.push(obj)
						}
						this.carModelRange = list
					}
				})
			},
			//报名开始时间展示滚轮
			chooseSignupStartTime: function() {
				this.signupStartTimeShow = true
			},
			//报名结束时间滚轮展示
			chooseSignupEndTime: function() {
				if (this.signupStartTime == '') {
					uni.showToast({
						title: '请选择报名开始时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
			
				this.signupEndTimeShow = true
			},
			//活动开始时间展示滚轮
			chooseActivityStartTime: function() {
				if (this.signupEndTime == '') {
					uni.showToast({
						title: '请选择报名结束时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				this.activityStartTimeShow = true
			},
			//活动结束时间滚轮展示
			chooseActivityEndTime: function() {
				if (this.activityStartTime == '') {
					uni.showToast({
						title: '请选择活动开始时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}

				this.activityEndTimeShow = true
			},
			//确定-时间下拉选择框
			confirmTime: function(e) {
				const timeFormat = uni.$u.timeFormat
				debugger
				if (this.signupStartTimeShow == true) {
					this.signupStartTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM') 
					this.signupStartTimeMin = e.value//最小时间
					this.signupStartTimeShow = false
				}
				if (this.signupEndTimeShow == true) {
					this.signupEndTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
					this.signupEndTimeMin = e.value//最小时间
					this.signupEndTimeShow = false
				}
				if (this.activityStartTimeShow == true) {
					this.activityStartTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
					this.activityStartTimeMin = e.value//最小时间
					this.activityStartTimeShow = false
				}
				if (this.activityEndTimeShow == true) {
					this.activityEndTime = timeFormat(e.value, 'yyyy-mm-dd hh:MM')
					this.activityEndTimeMin = e.value//最小时间
					this.activityEndTimeShow = false
				}
			},
			//取消-下拉框
			cancelPicker: function() {
				if (this.signupStartTimeShow == true) {
					this.signupStartTimeShow = false
				}
				if (this.signupEndTimeShow == true) {
					this.signupEndTimeShow = false
				}
				if (this.activityStartTimeShow == true) {
					this.activityStartTimeShow = false
				}
				if (this.activityEndTimeShow == true) {
					this.activityEndTimeShow = false
				}
			},
			
			//输入活动标题
			myCommentInput: function(e) {
				this.remnant = e.detail.value.length
			},
			//选择活动类型
			activityChange: function(e) {
				// debugger
				if(e.detail.value=='2'){
					this.activityType = 2
				}else{
					this.activityType = 1
				}
				
				this.activityAddress = []
				this.startingPoint = [] 
				this.endingPoint = []
			},
			//选择参与范围(车主/所有用户）
			peopleRangeChange: function(e) {
				// this.peopleType = e.detail.value 
				if(e.detail.value=='0'){
					this.peopleType = 0
				}else{
					this.peopleType = 1
				}
			},
			//选择车型范围
			carModelAllChange() {
				if (this.allChecked == true) {
					this.allChecked = false;
					// 遍历carModelRange数组 取消全选
					this.carModelRange.forEach(item => {
						this.$set(item, 'checked', false)
					})
				} else {
					this.allChecked = true;
					// 遍历carModelRange数组 设置全选
					this.carModelRange.forEach(item => {
						this.$set(item, 'checked', true)
					})
				}
				console.log(JSON.stringify(this.carModelRange))
			},
			carModelRangeChange(e, item) {
				// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
				if (item.checked == true) {
					this.$set(item, 'checked', false)
				} else {
					this.$set(item, 'checked', true)
				}
				// 过滤出数组中checked为true的项目，如果和原carModelRange长度相等，就全选显示
				let newArr = this.carModelRange.filter(item => (item.checked == true))
				if (newArr.length === this.carModelRange.length) {
					this.allChecked = true;
				} else {
					this.allChecked = false;
				}
			},
			
			//选择报名门槛
			thresholdChange: function(e) {
				// this.thresholdType = e.detail.value
				if(e.detail.value=='0'){
					this.thresholdType = 0
				}else{
					this.thresholdType = 1
				}
				this.points=''
			},
			//输入消耗积分
			pointsInput: function(e) {
				this.points = e.detail.value
			},
			//选择位置
			chooseAddress: function(e){
				uni.navigateTo({
					url: '/module_community/pages/activity/map?type='+ e
				})
			},
			
			//输入监听
			inputValueChange(e) {
				let type = e.currentTarget.dataset.type
				let value = e.detail.value

				if (type == 'mobile' || type == 'peopleNum') {
					value = Number(value.toString().match(/^\d+(?:\.\d{0,2})?/)[0])
					this.$nextTick(() => {
						this.formData[type] = value
					})
				}
			},
			
			//活动详情
			detailChange(val) {
				this.content = val.detail.html
			},

			readOnlyChange() {
				this.readOnly = !this.readOnly
			},
			onEditorDetailsReady() {
				uni.createSelectorQuery().select('#editorDetails').context((res) => {
					this.editorCtx = res.context
				}).exec()
			},
			undo() {
				this.editorCtx.undo()
			},
			redo() {
				this.editorCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorCtx.format(name, value)
			},
			insertDivider() {
				this.editorCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			//温馨提示
			// inputTipsChange: function(e) {
			// 	this.tips = e.detail.value
			// },
			tipChange(val){
				this.tips = val.detail.html
			},
			onEditorTipsReady() {
				uni.createSelectorQuery().select('#editorDetails').context((res) => {
					this.editorTipCtx = res.context
				}).exec()
			},
			undo() {
				this.editorTipCtx.undo()
			},
			redo() {
				this.editorTipCtx.redo()
			},
			format(e) {
				let {
					name,
					value
				} = e.target.dataset
				if (!name) return
				// console.log('format', name, value)
				this.editorTipCtx.format(name, value)
			},
			insertDivider() {
				this.editorTipCtx.insertDivider({
					success: function() {
						console.log('insert divider success')
					}
				})
			},
			clear() {
				this.editorTipCtx.clear({
					success: function(res) {
						console.log("clear success")
					}
				})
			},
			
			
			uploadFileCover(fileUrl, mediaType) {
				if(mediaType == 'video'){
					uni.showToast({
						title: "请上传图片",
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var _self = this;
				var uploadUrl = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_ALIYUN_OSS_UPLOAD
				var uploadTask = uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: fileUrl,
					name: 'file',
					header: {
						"token": "Bearer " + app.globalData.token,
						"Authorization": "Bearer " + app.globalData.token,
					},
					success: (uploadFileRes) => {
						var uploadFileData = JSON.parse(uploadFileRes.data);
						if (uploadFileData.code == 200) {
							_self.cover = uploadFileData.data
						} else {
							setTimeout(() => {
								uni.showToast({
									title: "上传失败" + uploadFileData.message,
									duration: 3000,
									icon: 'none'
								})
							}, 500);
							
			
						}
					},
					fail(e) {
						console.log("上传失败", e);
					}
				});
			
			},
			uploadFile(fileUrl, mediaType) {
				var _self = this;
				var uploadUrl = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_ALIYUN_OSS_UPLOAD
				var uploadTask = uni.uploadFile({
					url: uploadUrl, //仅为示例，非真实的接口地址
					filePath: fileUrl,
					name: 'file',
					header: {
						"token": "Bearer " + app.globalData.token,
						"Authorization": "Bearer " + app.globalData.token,
					},
					success: (uploadFileRes) => {
						var uploadFileData = JSON.parse(uploadFileRes.data);
						if (uploadFileData.code == 200) {
							this.editorCtx.insertImage({
								src: uploadFileData.data,
								alt: '图像',
								success: function() {
									console.log(_self.fileList)
									_self.urls.push(uploadFileData.data)
								}
							})
						} else {
							uni.showToast({
								title: "上传失败" + uploadFileData.message,
								duration: 3000,
								icon: 'none'
							})

						}
					},
					fail(e) {
						console.log("上传失败", e);
					}
				});

			},
			//详情加图
			insertImage() {
				uni.chooseImage({
					count: 9,
					// success: (res) => {
					// 	console.log(res)
					// 	this.uploadFile(res.tempFilePaths[0], 'image')
					// }
					success: (res) => {
						console.log('res!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!'+ JSON.stringify(res))
						for(var i=0;i<res.tempFilePaths.length;i++){
							this.uploadFile(res.tempFilePaths[i], 'image')
						}
					}
				})
			},
			//封面
			selectMedia() {
				var that = this
				// uni.showActionSheet({
				// 	itemList: that.selector,
				// 	success: function(res) {
				// 		that.confirm(res.tapIndex + 1)
				// 		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
				// 	},
				// 	fail: function(res) {
				// 		console.log(res.errMsg);
				// 	}
				// });
				uni.chooseImage({
					count: 1,
					success: (res) => {
						console.log(res)
						this.uploadFileCover(res.tempFilePaths[0], 'image')
				
					}
				})
			},

			confirm(e) {
				console.log(this.fileList.length)
				if (this.fileList.length == 20) {
					uni.showToast({
						title: '最多20张图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				console.log(this.fileList[0].mediaType)
				var index = this.fileList.length - 1;
				debugger
				console.log(this.$refs['uploadView' + index][0])
				this.$refs['uploadView' + index][0].upload(e)

			},
			commentTouched() {
				//临时跳转-------------
				// uni.switchTab({
				// 	url: '/pages/community/community'
				// });
				// return
				// uni.navigateTo({
				// 	url: '/module_community/pages/activity/detail/detail'
				// })
				// return
				//临时跳转-----------------
				if (this.flag) {
					return
				}
				if (this.content)
				var type = ''
				var path = ''
				// if (this.fileList.path.length != 0) {
				// 	type = this.fileList.type
				// 	path = this.fileList.path
				// }
				var that = this;
				
				this.imgList = []
				if (this.cover == 'https://dnsverify.pfmoto.com/appstatic/community/article-cover.png' || this.cover == '') {
					uni.showToast({
						title: '请上传封面图',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.titleActivity == '') {
					uni.showToast({
						title: '请输入活动标题',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				
				if (this.signupStartTime == '') {
					uni.showToast({
						title: '请选择报名开始时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.signupEndTime == '') {
					uni.showToast({
						title: '请选择报名结束时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.activityStartTime == '') {
					uni.showToast({
						title: '请选择活动开始时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.activityEndTime == '') {
					uni.showToast({
						title: '请选择活动结束时间',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if (this.peopleNum == '') {
					uni.showToast({
						title: '参与人数不能为空',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				if(!Number.isInteger(Number(this.peopleNum)) || Number(this.peopleNum) <= 0){
					uni.showToast({
						title: '参与人数需为正整数',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				//区分参与范围
				// if(this.peopleType==1){//仅车主
				// 	if (this.carModelType.length == 0) {
				// 		uni.showToast({
				// 			title: '请选择车型范围',
				// 			duration: 3000,
				// 			icon: 'none'
				// 		})
				// 		return
				// 	}
				// }
				//报名门槛区分
				if(this.thresholdType==1){//消耗积分
					if (this.points== '') {
						uni.showToast({
							title: '消耗积分不能为空',
							duration: 3000,
							icon: 'none'
						})
						return
					}
					if(!Number.isInteger(Number(this.points)) || Number(this.points) <= 0){
						uni.showToast({
							title: '消耗积分需为正整数',
							duration: 3000,
							icon: 'none'
						})
						return
					}
				}
				//区分活动类型
				if(this.activityType==1){//骑行活动
					if (this.activityStartAddress == '') {
						uni.showToast({
							title: '请选择活动起点',
							duration: 3000,
							icon: 'none'
						})
						return
					}
					if (this.activityEndAddress == '') {
						uni.showToast({
							title: '请选择活动终点',
							duration: 3000,
							icon: 'none'
						})
						return
					}
				}else{//普通报名活动
					if (this.activitySpotAddress == '') {
						uni.showToast({
							title: '请选择活动地点',
							duration: 3000,
							icon: 'none'
						})
						return
					}
				}
				
				for (let i in this.fileList) {
					if (this.fileList[i].url) {
						this.imgList.push(this.fileList[i].url)
					}
				}

				if (this.content.match(/<img/g) && this.content.match(/<img/g).length > 20) {
					uni.showToast({
						title: '活动详情最多20张图片',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				// console.log(this.content)
				var contentLen = this.content.replace(/<\/?.+?\/?>/g, '')

				if (contentLen.length <= 0 && this.urls.length <= 0) {
					uni.showToast({
						title: '请输入活动详情',
						duration: 3000,
						icon: 'none'
					})
					return
				} else if (contentLen.length >= 10000) {
					uni.showToast({
						title: '活动详情不能超过10000字符',
						duration: 3000,
						icon: 'none'
					})
					return
				}
				var aList=JSON.parse(JSON.stringify(this.carModelRange))
				console.log('aList!!!!!!!!!!!!!!' + JSON.stringify(aList))
				let newcarModel = aList.filter(item => (item.checked === true))
				console.log('newcarModel with checked!!!!!!!!!!!!!!' + JSON.stringify(newcarModel))
				for(var i=0;i<newcarModel.length;i++){
					 delete newcarModel[i].checked
				}
				if(this.peopleType==0){//所有用户
					newcarModel=[]
				}
				console.log('newcarModel withOut checked!!!!!!!!!!!!!!' + JSON.stringify(newcarModel))
				debugger
				if(this.peopleType==1){//仅车主
					if (newcarModel.length == 0) {
						uni.showToast({
							title: '请选择车型范围',
							duration: 3000,
							icon: 'none'
						})
						return
					}
				}
				this.urls.push(this.cover)
				var activityType=''
				var latitudeAndLongitudeParam=[]//经纬度
				if(this.activityType==1){
					console.log(this.startingPoint + '+' + this.endingPointParam)
					activityType='骑行活动'
					latitudeAndLongitudeParam=[{latitude:this.startingPoint[1],longitude:this.startingPoint[0]},{latitude:this.endingPoint[1],longitude:this.endingPoint[0]}]
				}else{
					activityType='普通活动报名'
					latitudeAndLongitudeParam=[{latitude:this.activityAddress[1],longitude:this.activityAddress[0]}]
				}
				
				// startingPointParam:this.startingPoint,//起点
				// endingPointParam:this.endingPoint,//终点
				// activityAddressParam:this.activityAddress,//活动地点
				
				
				var params = {
					authorId: app.getUserId(),
					isOfficial:'0',
					cover:this.cover,//封面
					title:this.titleActivity,//标题
					activityType:activityType,//活动类型(骑行活动/普通活动报名)
					
					   
					signStartTime: this.signupStartTime,
					signEndTime: this.signupEndTime,
					activityStartTime:this.activityStartTime,
					activityEndTime: this.activityEndTime,
					 
					signLimit:this.peopleNum,//参与人数
					signScope:this.peopleType,//	参与范围（0所有用户 1车主)
					partyModelList:newcarModel,//{modelId，modelName，sort}
					isDoorsill:this.thresholdType,//是否有门槛(0无 1有)
					doorsillScore:this.points,//消耗积分
					
					// startingPointParam:this.startingPoint,//起点
					// endingPointParam:this.endingPoint,//终点
					// activityAddressParam:this.activityAddress,//活动地点
					latitudeAndLongitudeParam:latitudeAndLongitudeParam,//经纬度
					activityAddress: this.activitySpotAddress,//活动地址中文    
					startingPoint: this.activityStartAddress ,//起点中文
					endingPoint: this.activityEndAddress,//终点中文
					
					activityCity:this.activityCityName,
					
					
					content:this.content,//活动详情
					reminder:this.tips,//温馨提示
				}
				// debugger
				console.log('参数'+params)
				this.flag = true
				this.disabled = true
				var uri = app.globalData.config.BASE_URL + app.globalData.config.interfaces.URL_APP_ADDACTIVITY;
				console.log('参数'+uri)
				network.post(uri, params, 'json').then(res => {
					if (res.code == 200) {
						that.clearData()
						uni.showToast({
							title: '发布成功',
							duration: 3000
						})

						app.globalData.workSwiper = 2
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/community/community'
							});
						}, 2000);
					} else {
						uni.showToast({
							title: res.message,
							duration: 3000,
							icon: 'none'
						})
						this.disabled = false
					}
					that.flag = false
				}).catch(res => {
					that.flag = false
					uni.showToast({
						title: res.errMsg,
						duration: 3000,
						icon: 'none'
					})
					console.error(res);
					this.disabled = false
				});
			},


			delImg(index) {
				console.log(index);
				this.fileList.splice(index, 1);
				console.log(this.fileList);
			},

			clearData() {
				this.fileList = [{
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				}]
				this.content = ''



				this.titleActivity = ''
				this.cover = ''

				this.clear()
			},





			uploading(item) {

				//to do 上传视频只能上传一个限制
				if (item.mediaType == 'video') {
					return
				}
				console.log('巴拉巴拉')
				// this.fileList.push(item)
				this.fileList.push({
					type: 0,
					mediaType: 'add',
					url: '',
					path: '',
					uuid: util.createUidKey()
				})
			},
			uploadSuccess(item) {
				uni.hideLoading()
				this.cover = item.url

				// this.fileList.findIndex(x => x.uuid === item.uuid).url = item.url;
			},
			uploadError(item) {
				console.log(item);
				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
			},
			uploadDelete(item) {
				console.log(item);

				this.fileList.splice(this.fileList.findIndex(x => x.uuid === item.uuid), 1);
				if (item.mediaType == 'video') {
					this.fileList.push({
						type: 0,
						mediaType: 'add',
						url: '',
						path: '',
						uuid: util.createUidKey()
					})
				}
				console.log(this.fileList);
			},


		},
	};
</script>

<style lang="scss">
	page {
		width: 100%;
		height: 100%;
		background: #f5f5f5;
	}
	 /deep/ uni-checkbox:not([disabled]) .uni-checkbox-input:hover {
	    border:1px solid #d1d1d1;
	}
	 /deep/ uni-checkbox .uni-checkbox-input.uni-checkbox-input-checked {
	    background-color: #EA5404;
	    border: 1px solid #d1d1d1;
	}
	.iconfont {
		display: inline-block;
		padding: 8px 8px;
		width: 24px;
		height: 24px;
		cursor: pointer;
		font-size: 20px;
	}

	.toolbar {
		box-sizing: border-box;
		border-bottom: 0;
		font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		text-align: center;
	}

	.ql-container {
		box-sizing: border-box;
		// padding: 12px 0px;
		width: 100%;
		height: 30vh;
		// height: 100%;
		// margin-top: 20px;
		font-size: 16px;
		line-height: 1.5;
	}

	.titleText {
		color: #3D3A3A;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-weight: 600;
		font-size: 16px;
		align-items: center;
		display: flex;
		position: absolute;
		top: calc(50% - 10px);
		left: calc((100% - 40px)/2);
	}

	.titleCommentTouched {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #FFFFFF;
		border: 1px solid #EA5404;
		background-color: #EA5404;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	.titleCommentTouched_ {
		width: 60px;
		height: 30px;
		box-sizing: border-box;
		border-radius: 2px;
		text-align: center;
		line-height: 30px;
		align-items: center;
		font-size: 14px;
		color: #ADB0AE;
		border: 1px solid #EDEDED;
		background-color: #EDEDED;
		position: absolute;
		left: calc(100% - 84px - 16px);
		top: calc(50% - 16px);
	}

	.showMore {
		width: 60px;
		height: 30px;
		position: absolute;
		top: calc(50% - 15px);
		left: calc(100% - 70px);
	}

	// .releaseState {
	//  width: calc(100vw - 60rpx);
	// 	height: 100%;
	// 	background: url("https://dnsverify.pfmoto.com/appstatic/my/my_icon_list_background.jpg") no-repeat;
	// 	background-size: 100%, 100vh;
	// 	position: absolute;
	// 	/*#ifdef MP-WEIXIN*/
	// 	top: 88px;
	// 	/*#endif*/
	// 	/*#ifdef APP-PLUS||H5*/
	// 	top: 44px;
	// 	/*#endif*/
	// }

	// ----------------------------
	.titleInput {
		width: calc(100% - 40px);
	}



	.inputNum {
		font-family: 'Noto Sans CJK SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 21px;
		display: flex;
		align-items: center;
		color: #ADB0AE;
	}

	.line {
		width: calc(100% - 0px);
		border: 0.5px solid #EDEDED;
		// margin-left: 24px;
	}

	.info-transverse-input {
		width: 100%;
		// height: 52px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.info-transverse {
		width: 100%;
		min-height: 52px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 8px;

	}

	.right {
		display: flex;
		vertical-align: middle;
		align-items: center;
		flex-direction: row;
		padding-left: 15px;
	}

	.arrow {
		width: 15px;
		height: 13px;
		align-self: center;
	}

	.text1 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #ADB0AE;

	}

	.text2 {
		font-family: 'Arial';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 16px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
		text-align: right;
	}

	.text3 {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		display: flex;
		align-items: center;
		color: #3D3A3A;
	}

	.popup {
		padding: 30rpx;
	}

	/deep/.ql-blank:before {
		font-style: normal !important;
		font-size: 28rpx;
		color: #ADB0AE;
		font-weight: 400;
	}

	.action-wraper {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 20rpx;
	}

	#editor {
		width: 100%;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 20px;
		text-transform: uppercase;
		color: #333333;
		margin-top: 15px;
		padding-bottom: 60px;
	}

	.action-wraper text {
		font-size: 32rpx;
		font-weight: 600;
		color: #3d3a3a;
	}

	/deep/ .u-textarea__count {
		position: relative;
		top: 0;
	}

	/deep/ .u-textarea,
	/deep/ .u-textarea__count {
		background-color: transparent !important;
	}

	.action-wraper image {
		width: 48rpx;
		height: 48rpx;
	}

	/deep/ u-search {
		margin-bottom: 30rpx;
	}

	.hot-topic {
		display: flex;
		flex-wrap: wrap;
	}

	.s-topoc-item .topic {
		display: block;
	}

	.hot-topic-title {
		margin-top: 30rpx;
	}

	.hot-topic-item {
		width: 50%;
		margin-top: 40rpx;

	}

	.hot-topic .select text {
		color: #ADB0AE;

	}

	.hot-topic .select image {
		opacity: 0.3;
	}

	.hot-topic-item text {
		display: inline-block;
		width: auto;
		height: 48rpx;
		line-height: 48rpx;
		font-size: 28rpx;
		color: #3d3a3a;
		left: 0px;
		top: 0px;
		padding: 4rpx 20rpx;
		text-align: center;
		background: rgba(61, 58, 58, 0.1);
		border-radius: 4rpx;

	}

	.hot-topic-item image {
		width: 30rpx;
		height: 30rpx;
		position: relative;
		margin-right: 10rpx;
		top: 4rpx;
	}

	// /deep/.u-popup .u-popup__content {
	// 	height: 80vh;
	// 	flex: 1 1 1 !important;
	// }

	// /deep/ .u-transition {
	// 	height: 80vh;
	// }

	// /deep/ .u-search__content__icon {
	// 	background-image: url('https://dnsverify.pfmoto.com/appstatic/community/topic-icon.png');
	// 	background-size: 28rpx 28rpx;
	// 	background-repeat: no-repeat;
	// 	background-position: 0 50%;
	// }

	.topic {
		display: flex;
		margin-top: 20px;
		flex-wrap: wrap;
	}

	.topic-item {

		background: rgba(234, 84, 4, 0.1);
		border-radius: 4rpx;
		display: inline;
		padding: 0 20rpx;
		margin-right: 30rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

	}

	.upload-img {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 4px;
		margin-bottom: 4px;
	}

	.upload-img image {
		width: 40rpx;
		height: 36rpx;
		margin-right: 8px;


	}

	.topic .close-topic {
		width: 32rpx;
		height: 32rpx;
		position: relative;
		top: 0;
		right: -14rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.topic-item text {
		color: #EA5404;
		padding-left: 20rpx;
	}

	.topic image {
		width: 24rpx;
		height: 24rpx;
	}

	.inputGreybg,
	.inputGreybg .uploadImg {
		width: 100%;
		height: 396rpx;
		display: inline-block;
	}

	.topicWraper {
		font-size: 28rpx;
		color: #828282;
		display: flex;

		padding: 40rpx 0;
		margin-top: 20rpx;
	}

	.releaseState {
		padding: 0 30rpx;
		width: calc(100vw - 60rpx);
		height: 100%;
		background: url("https://dnsverify.pfmoto.com/appstatic/my/my_icon_list_background.jpg") no-repeat;
		background-size: 100%, 100vh;
		position: absolute;
		/*#ifdef MP-WEIXIN*/
		top: 88px;
		/*#endif*/
		/*#ifdef APP-PLUS||H5*/
		top: 44px;
		/*#endif*/
		
		.textarea {
			font-size: 28rpx;
			line-height: 160%;
			color: #bdbdbd;
			width: 100%;
			padding-top: 30rpx;
		}

		.uploadImg {
			margin-top: 20rpx;

			.videoClass {
				width: 100%;

				#myVideo {
					width: 100%;
				}
			}

			.imageList {
				margin: 6rpx 6rpx 0 0;
				display: inline-block;
				position: relative;

				.image {
					width: 216rpx;
					height: 216rpx;
					display: inline-block;
					border-radius: 20rpx;
				}

				.delImg {
					position: absolute;
					right: 8rpx;
					top: 8rpx;
					width: 40rpx;
					height: 40rpx;
					z-index: 2;
				}
			}

			.onlyImageList {
				.onlyImage {
					width: 100%;
					display: inline-block;
				}
			}
		}

		.uploadBtn {
			width: 216rpx;
			height: 216rpx;
			border-radius: 20rpx;
			display: inline-block;
		}

		.videoView {
			width: 672rpx;
			height: 522rpx;
			border-radius: 20rpx;
			display: inline-block;
			margin-bottom: 100rpx;
		}



		.footer {
			position: fixed;
			bottom: 0rpx;
			left: 0;
			right: 0;
			display: flex;
			flex-direction: row;
			align-items: center;
			background-color: #f5f5f5;
			padding: 30rpx 46rpx;
		}

		.commentTouched {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #FFFFFF;
			border: 1px solid #EA5404;
			background-color: #EA5404;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}

		.commentTouched_ {
			width: 84px;
			height: 32px;
			box-sizing: border-box;
			border-radius: 2px;
			text-align: center;
			line-height: 32px;
			align-items: center;
			font-size: 14px;
			color: #ADB0AE;
			border: 1px solid #EDEDED;
			background-color: #EDEDED;
			position: absolute;
			left: calc(100% - 84px - 16px);
			top: calc(50% - 16px);
		}
	}
</style>
